<{include file="header.html"}>
<script type="text/javascript">
	var firstLoad =true;
	function validate()
	{
		var date = document.getElementById('DATE');
        var time = document.getElementById('TIME');
		var service = document.getElementById('SERVICE');
		var selectedID = "";
		$("#SERVICE option:selected").each(function () {
			var $this = $(this);
			if ($this.length) {
				var selText = $this.val();
				selectedID = selectedID + "" +  selText  + ",";
			}
		});
		if(selectedID == ""){
			showErrorBubble(null, '<{$smarty.const._MSG_BOOKING_INVALID_SERVICE|utf8_escape_js}>');
			return false;
		}
		if(date.value == ""){
			showErrorBubble(null, '<{$smarty.const._MSG_BOOKING_INVALID_DATE|utf8_escape_js}>');
			return false;
		}
		
		if(!$("input[type=radio][name='TIME']:checked").val()){
			showErrorBubble(null, '<{$smarty.const._MSG_BOOKING_INVALID_TIME|utf8_escape_js}>');
			return false;
		}
		document.booking_form.submit();
	}
	function selectService(){
		var service = document.getElementById('SERVICE');
		var html = "";
		var selected = false;
		$("#SERVICE option:selected").each(function () {
			var $this = $(this);
			if ($this.length) {
				var selText = $this.text();
				html = html + "" +  selText  + "<br />";
				selected = true;
			}
		 });
		 $("#selectedService").html(html);
		 return selected;
	}
	function getWorkingHour(){
		var selectedID = "";
		$("#SERVICE option:selected").each(function () {
			var $this = $(this);
			if ($this.length) {
				var selText = $this.val();
				selectedID = selectedID + "" +  selText  + ",";
			}
		});
		var date = document.getElementById('DATE');
		var agr = new Array();
		agr.push(date.value);
		agr.push(selectedID);
		<{if $bdID > 0}>
		agr.push(<{$bdID}>);
		<{/if}>
		var txt = callFunction('Booking::checkAvailableBooking',agr);
		$("#dTIME").html(txt);
		if(firstLoad){
			if(!$('input[type=radio][name="TIME"][value="<{$selectedTIME}>"]').prop('disabled')){
				$('input[type=radio][name="TIME"][value="<{$selectedTIME}>"]').prop('checked', true);
			}
			firstLoad = false;
		}
		$("#dTIME").buttonset("refresh");
		//getAvailableTechnician();
	}
	$(function () {
		$( "#datepicker" ).datepicker({
			altField: "#DATE",
			altFormat: "dd/mm/yy",
			minDate : new Date(),
			defaultDate : new Date("<{$selectedDATE|date_format:"%Y,%m,%d"}>"),
			onSelect :function( selectedDate ) {
				getWorkingHour();
			}
		});
		$("#dTIME").buttonset();
		selectService();
		getWorkingHour();
	 });
</script>
<style >
#tabs .ui-widget-header { 
    background:#911F7E; 
    border: none; 
    border-bottom: 1px solid #c0c0c0; 
    -moz-border-radius: 0px; 
    -webkit-border-radius: 0px; 
    border-radius: 0px; 
}
#ApproveButtonLabel.ui-state-default {margin: 2px;}
#ApproveButtonLabel.ui-state-default span.ui-button-text {font-size: 12px; font-weight: normal;}
#ApproveButtonLabel.ui-state-active { background: #911F7E; }
#ApproveButtonLabel.ui-state-active span.ui-button-text { color: #FFF; font-size: 12px; }
</style>
<div id="content">
    <div class="container">
        <div class="main-content">
            <h1 class="title"><{$smarty.const._LB_BOOKING_ADJUSTMENT|utf8_escape_html}></h1>
            <{assign var=user value=$bookingData.USER_INFO}>
			<{assign var=techData value=$bookingData.TDATA}>
			<form action="<{$smarty.server.REQUEST_URI}>" method="post" enctype="multipart/form-data" id="form-booking1"  name="booking_form">
			<input type="hidden" id="act" name="act" value="<{$smarty.const.ACT_VALID_EDIT}>"/>
			<{foreach from=$techData key=techID item=data}>
			<{assign var=techTitle value=$data.TITLE}>
			<{assign var=sData value=$data.SDATA}>
			<table width="100%">
				<tr>
					<td width="50%" valign="top">
						<select id="SERVICE" name="SERVICE[]" multiple="10" size="15" onchange="selectService()">
						<{if $arrService|count > 0 }>
						<{foreach from=$arrService key=gID item=dataService}>
							<{assign var=gTitle value=$dataService.TITLE}>
							<{assign var=sArr value=$dataService.DATA}>
							<{if $dataService|count > 0 }>
								<optgroup label="<{$gTitle|utf8_escape_html}>">
								<{foreach from=$sArr key=ID item=item}>	
								<option value="<{$item.ID|utf8_escape_html}>" <{if isset($sData[$ID])}>selected="selected"<{/if}>><{$item.TITLE|utf8_escape_html}> ( <{$item.TIME|utf8_escape_html}> mins - $<{$item.PRICE|utf8_escape_html}> )</option>
								<{/foreach}>
							</optgroup>
							<{/if}>
						<{/foreach}>
						<{/if}>
						</select>
					</td>
					<td valign="top"><div id="selectedService"></div></td>
				</tr>
				<tr>
					<td ><div id="datepicker"></div><input  type="hidden" class="date" name="DATE" id="DATE" value="" /></td>
					<td><div id="dTIME"></div></td>
				</tr>
				<tr>
					<td class="submit" colspan="2" style="padding-top:10px;text-align: center">
						<input class="btn" onclick="javascript:location.href='<{$backlink}>'" value="Back" id="btnBackService" type="button"/>
						<input class="btn" value="<{$smarty.const._LB_VALIDATE}>" id="btnSubmit" onclick="validate()" type="button"/>
					</td>
				</tr>
			</table>
			<{/foreach}>
			</form>
			
        </div>
        <div class="sidebar">
            <{include file="right_business_hours.html"}>
			<{include file="right_service.html"}>
        </div><!--End .sidebar-->
    </div>
</div>
<{include file="footer.html"}>